import { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import Header from '../common/header'
import '../assets/css/voucher.css'
import { Tabs } from 'antd-mobile'
import { DownOutline } from 'antd-mobile-icons'
import { getCoupon } from '../request/app'

export default function Voucher() {
  let [brandNew, setBrandNew] = useState([])
  let [brand, setBrand] = useState([])
  let [expire, setexpire] = useState([])

  useEffect(() => {
    getCoupon().then(res => {
      console.log(res)
      if (res.code == 200) {
        setBrandNew(res.list[0].content)
        setBrand(res.list[1].content)
        setexpire(res.list[2].content)
      }
    })
  }, [])
  function add0(m) {
    return m < 10 ? '0' + m : m
  }
  function time(t) {
    let msg = '.'
    let time = new Date(parseInt(t))

    let y = time.getFullYear()
    let m = time.getHours() + 1
    let d = time.getDate()
    console.log(time)
    return y + msg + add0(m) + msg + add0(d)
  }
  return (
    <div className='voucher'>
      <Header title={'优惠券'} />
      <Tabs
        style={{
          '--title-font-size': '0.15rem',
          '--active-title-color': '#FF6040',
          '--active-line-color': '#FF6040',
          '--active-line-height': '0.05rem'
        }}
      >
        <Tabs.Tab title='未使用' key='fruits'>
          <div className=''></div>
          {/* 优惠券 */}

          {brandNew.map(item => {
            return (

              <div className='box' key={item.id}>
                <Link to='/order' state={item}>
                  <div className='top'>
                    <div className='left'>
                      ￥<span>{item.money}</span>
                      <p>满{item.limit_money}可用</p>
                    </div>
                    <div className='right'>
                      <h4>{item.title}</h4>
                      <p>
                        {time(item.begintime)}至{time(item.endtime)}
                      </p>
                    </div>
                  </div>
                  <div className='inner'>
                    <hr />
                  </div>

                  <div className='bottom'>
                    <p>使用规则：{item.description}</p>
                    <span>
                      <DownOutline color='var(--adm-color-danger)' />
                    </span>
                  </div>
                </Link>
              </div>
            )
          })}
        </Tabs.Tab>
        <Tabs.Tab title='已使用' key='vegetables'>
          {brand.map(item => {
            return (
              <div className='box' key={item.id}>
                <div className='top'>
                  <div className='left'>
                    ￥<span>{item.money}</span>
                    <p>满{item.limit_money}可用</p>
                  </div>
                  <div className='right'>
                    <h4>{item.title}</h4>
                    <p>
                      {time(item.begintime)}至{time(item.endtime)}
                    </p>
                  </div>
                </div>
                <div className='inner'>
                  <hr />
                </div>

                <div className='bottom'>
                  <p>使用规则：{item.description}</p>
                  <span>
                    <DownOutline color='var(--adm-color-danger)' />
                  </span>
                </div>
              </div>
            )
          })}
        </Tabs.Tab>
        <Tabs.Tab title='已失效' key='animals'>
          {expire.map(item => {
            return (
              <div className='box' key={item.id}>
                <div className='top'>
                  <div className='left'>
                    ￥<span>{item.money}</span>
                    <p>满{item.limit_money}可用</p>
                  </div>
                  <div className='right'>
                    <h4>{item.title}</h4>
                    <p>
                      {time(item.begintime)}至{time(item.endtime)}
                    </p>
                  </div>
                </div>
                <div className='inner'>
                  <hr />
                </div>

                <div className='bottom'>
                  <p>使用规则：{item.description}</p>
                  <span>
                    <DownOutline color='var(--adm-color-danger)' />
                  </span>
                </div>
              </div>
            )
          })}
        </Tabs.Tab>
      </Tabs>
    </div>
  )
}
